<template>
  <div class='dashboard-container'>
    <TabChange
      :default-activity='defaultActivity'
      :order-statics='orderStatics'
      @tabChange='change'
    />
    <div :class='{ hContainer: tableData.length }' class='container'>
      <!-- 搜索项 -->
      <div class='tableBar'>
        <label style='margin-right: 10px'>订单号：</label>
        <el-input
          v-model='input'
          clearable
          placeholder='请填写订单号'
          style='width: 15%'
          @clear='init(orderStatus)'
          @keyup.enter.native='initFun(orderStatus)'
        />
        <label style='margin-left: 20px'>手机号：</label>
        <el-input
          v-model='phone'
          clearable
          placeholder='请填写手机号'
          style='width: 15%'
          @clear='init(orderStatus)'
          @keyup.enter.native='initFun(orderStatus)'
        />
        <label style='margin-left: 20px'>下单时间：</label>
        <el-date-picker
          v-model='valueTime'
          :default-time="['00:00:00', '23:59:59']"
          clearable
          end-placeholder='结束日期'
          range-separator='至'
          start-placeholder='开始日期'
          style='width: 25%; margin-left: 10px'
          type='daterange'
          value-format='yyyy-MM-dd HH:mm:ss'
          @clear='init(orderStatus)'
        />
        <el-button class='normal-btn continue' @click='init(orderStatus, true)'>
          查询
        </el-button>
      </div>
      <el-table
        v-if='tableData.length'
        :data='tableData'
        class='tableBox'
        stripe
      >
        <el-table-column key='number' label='订单号' prop='number' />
        <el-table-column
          v-if='[2, 3, 4].includes(orderStatus)'
          key='orderDishes'
          label='订单菜品'
          prop='orderDishes'
        />
        <el-table-column
          v-if='[0].includes(orderStatus)'
          key='status'
          label='订单状态'
          prop='订单状态'
        >
          <template slot-scope='{ row }'>
            <span>{{ getOrderType(row) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if='[0, 5, 6].includes(orderStatus)'
          key='consignee'
          label='用户名'
          prop='consignee'
          show-overflow-tooltip
        />
        <el-table-column
          v-if='[0, 5, 6].includes(orderStatus)'
          key='phone'
          label='手机号'
          prop='phone'
        />
        <el-table-column
          v-if='[0, 2, 3, 4, 5, 6].includes(orderStatus)'
          key='address'
          :class-name="orderStatus === 6 ? 'address' : ''"
          label='地址'
          prop='address'
        />
        <el-table-column
          v-if='[0, 6].includes(orderStatus)'
          key='orderTime'
          class-name='orderTime'
          label='下单时间'
          min-width='110'
          prop='orderTime'
        />
        <el-table-column
          v-if='[6].includes(orderStatus)'
          key='cancelTime'
          class-name='cancelTime'
          label='取消时间'
          min-width='110'
          prop='cancelTime'
        />
        <el-table-column
          v-if='[6].includes(orderStatus)'
          key='cancelReason'
          :min-width="[6].includes(orderStatus) ? 80 : 'auto'"
          class-name='cancelReason'
          label='取消原因'
          prop='cancelReason'
        />
        <el-table-column
          v-if='[5].includes(orderStatus)'
          key='deliveryTime'
          label='送达时间'
          prop='deliveryTime'
        />
        <el-table-column
          v-if='[2, 3, 4].includes(orderStatus)'
          key='estimatedDeliveryTime'
          label='预计送达时间'
          min-width='110'
          prop='estimatedDeliveryTime'
        />
        <el-table-column
          v-if='[0, 2, 5].includes(orderStatus)'
          key='amount'
          align='center'
          label='实收金额'
          prop='amount'
        >
          <template slot-scope='{ row }'>
            <span>￥{{ (row.amount.toFixed(2) * 100) / 100 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if='[2, 3, 4, 5].includes(orderStatus)'
          key='remark'
          align='center'
          label='备注'
          prop='remark'
        />
        <el-table-column
          v-if='[2, 3, 4].includes(orderStatus)'
          key='tablewareNumber'
          align='center'
          label='餐具数量'
          min-width='80'
          prop='tablewareNumber'
        />
        <el-table-column
          :class-name="orderStatus === 0 ? 'operate' : 'otherOperate'"
          :min-width="
            [2, 3, 4].includes(orderStatus)
              ? 130
              : [0].includes(orderStatus)
              ? 140
              : 'auto'
          "
          align='center'
          label='操作'
          prop='btn'
        >
          <template slot-scope='{ row }'>
            <!-- <el-divider direction="vertical" /> -->
            <div class='before'>
              <el-button
                v-if='row.status === 2'
                class='blueBug'
                type='text'
                @click='orderAccept(row), (isTableOperateBtn = true)'
              >
                接单
              </el-button>
              <el-button
                v-if='row.status === 3'
                class='blueBug'
                type='text'
                @click='cancelOrDeliveryOrComplete(3, row.id)'
              >
                派送
              </el-button>
              <el-button
                v-if='row.status === 4'
                class='blueBug'
                type='text'
                @click='cancelOrDeliveryOrComplete(4, row.id)'
              >
                完成
              </el-button>
            </div>
            <div class='middle'>
              <el-button
                v-if='row.status === 2'
                class='delBut'
                type='text'
                @click='orderReject(row), (isTableOperateBtn = true)'
              >
                拒单
              </el-button>
              <el-button
                v-if='[1, 3, 4, 5].includes(row.status)'
                class='delBut'
                type='text'
                @click='cancelOrder(row)'
              >
                取消
              </el-button>
            </div>
            <div class='after'>
              <el-button
                class='blueBug non'
                type='text'
                @click='goDetail(row.id, row.status, row)'
              >
                查看
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <Empty v-else :is-search='isSearch' />
      <el-pagination
        v-if='counts > 10'
        :page-size='pageSize'
        :page-sizes='[10, 20, 30, 40]'
        :total='counts'
        class='pageList'
        layout='total, sizes, prev, pager, next, jumper'
        @size-change='handleSizeChange'
        @current-change='handleCurrentChange'
      />
    </div>

    <!-- 查看弹框部分 -->
    <el-dialog
      :before-close='handleClose'
      :visible.sync='dialogVisible'
      class='order-dialog'
      title='订单信息'
      width='53%'
    >
      <el-scrollbar style='height: 100%'>
        <div class='order-top'>
          <div>
            <div style='display: inline-block'>
              <label style='font-size: 16px'>订单号：</label>
              <div class='order-num'>
                {{ diaForm.number }}
              </div>
            </div>
            <div
              :class='{ status3: [3, 4].includes(dialogOrderStatus) }'
              class='order-status'
              style='display: inline-block'
            >
              {{
                orderList.filter((item) => item.value === dialogOrderStatus)[0]
                  .label
              }}
            </div>
          </div>
          <p><label>下单时间：</label>{{ diaForm.orderTime }}</p>
        </div>

        <div class='order-middle'>
          <div class='user-info'>
            <div class='user-info-box'>
              <div class='user-name'>
                <label>用户名：</label>
                <span>{{ diaForm.consignee }}</span>
              </div>
              <div class='user-phone'>
                <label>手机号：</label>
                <span>{{ diaForm.phone }}</span>
              </div>
              <div
                v-if='[2, 3, 4, 5].includes(dialogOrderStatus)'
                class='user-getTime'
              >
                <label>{{
                    dialogOrderStatus === 5 ? '送达时间：' : '预计送达时间：'
                  }}</label>
                <span>{{
                    dialogOrderStatus === 5
                      ? diaForm.deliveryTime
                      : diaForm.estimatedDeliveryTime
                  }}</span>
              </div>
              <div class='user-address'>
                <label>地址：</label>
                <span>{{ diaForm.address }}</span>
              </div>
            </div>
            <div
              :class='{ orderCancel: dialogOrderStatus === 6 }'
              class='user-remark'
            >
              <div>{{ dialogOrderStatus === 6 ? '取消原因' : '备注' }}</div>
              <span>{{
                  dialogOrderStatus === 6
                    ? diaForm.cancelReason || diaForm.rejectionReason
                    : diaForm.remark
                }}</span>
            </div>
          </div>

          <div class='dish-info'>
            <div class='dish-label'>菜品</div>
            <div class='dish-list'>
              <div
                v-for='(item, index) in diaForm.orderDetailList'
                :key='index'
                class='dish-item'
              >
                <div class='dish-item-box'>
                  <span class='dish-name'>{{ item.name }}</span>
                  <span class='dish-num'>x{{ item.number }}</span>
                </div>
                <span class='dish-price'
                >￥{{ item.amount ? item.amount.toFixed(2) : '' }}</span
                >
              </div>
            </div>
            <div class='dish-all-amount'>
              <label>菜品小计</label>
              <span
              >￥{{
                  (diaForm.amount - 6 - diaForm.packAmount).toFixed(2)
                }}</span
              >
            </div>
          </div>
        </div>

        <div class='order-bottom'>
          <div class='amount-info'>
            <div class='amount-label'>费用</div>
            <div class='amount-list'>
              <div class='dish-amount'>
                <span class='amount-name'>菜品小计：</span>
                <span class='amount-price'
                >￥{{
                    ((diaForm.amount - 6 - diaForm.packAmount).toFixed(2) *
                      100) /
                    100
                  }}</span
                >
              </div>
              <div class='send-amount'>
                <span class='amount-name'>派送费：</span>
                <span class='amount-price'>￥{{ 6 }}</span>
              </div>
              <div class='package-amount'>
                <span class='amount-name'>打包费：</span>
                <span class='amount-price'
                >￥{{
                    diaForm.packAmount
                      ? (diaForm.packAmount.toFixed(2) * 100) / 100
                      : ''
                  }}</span
                >
              </div>
              <div class='all-amount'>
                <span class='amount-name'>合计：</span>
                <span class='amount-price'
                >￥{{
                    diaForm.amount
                      ? (diaForm.amount.toFixed(2) * 100) / 100
                      : ''
                  }}</span
                >
              </div>
              <div class='pay-type'>
                <span class='pay-name'>支付渠道：</span>
                <span class='pay-value'>{{
                    diaForm.payMethod === 1 ? '微信支付' : '支付宝支付'
                  }}</span>
              </div>
              <div class='pay-time'>
                <span class='pay-name'>支付时间：</span>
                <span class='pay-value'>{{ diaForm.checkoutTime }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
      <span v-if='dialogOrderStatus !== 6' slot='footer' class='dialog-footer'>
        <el-checkbox
          v-if='dialogOrderStatus === 2 && orderStatus === 2'
          v-model='isAutoNext'
        >处理完自动跳转下一条</el-checkbox
        >
        <el-button
          v-if='dialogOrderStatus === 2'
          @click='orderReject(row), (isTableOperateBtn = false)'
        >拒 单</el-button
        >
        <el-button
          v-if='dialogOrderStatus === 2'
          type='primary'
          @click='orderAccept(row), (isTableOperateBtn = false)'
        >接 单</el-button
        >

        <el-button
          v-if='[1, 3, 4, 5].includes(dialogOrderStatus)'
          @click='dialogVisible = false'
        >返 回</el-button
        >
        <el-button
          v-if='dialogOrderStatus === 3'
          type='primary'
          @click='cancelOrDeliveryOrComplete(3, row.id)'
        >派 送</el-button
        >
        <el-button
          v-if='dialogOrderStatus === 4'
          type='primary'
          @click='cancelOrDeliveryOrComplete(4, row.id)'
        >完 成</el-button
        >
        <el-button
          v-if='[1].includes(dialogOrderStatus)'
          type='primary'
          @click='cancelOrder(row)'
        >取消订单</el-button
        >
      </span>
    </el-dialog>
    <!-- 拒单，取消弹窗 -->
    <el-dialog
      :before-close="() => ((cancelDialogVisible = false), (cancelReason = ''))"
      :title="cancelDialogTitle + '原因'"
      :visible.sync='cancelDialogVisible'
      class='cancelDialog'
      width='42%'
    >
      <el-form label-width='90px'>
        <el-form-item :label="cancelDialogTitle + '原因：'">
          <el-select
            v-model='cancelReason'
            :placeholder="'请选择' + cancelDialogTitle + '原因'"
          >
            <el-option
              v-for="(item, index) in cancelDialogTitle === '取消'
                ? cancelrReasonList
                : cancelOrderReasonList"
              :key='index'
              :label='item.label'
              :value='item.label'
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="cancelReason === '自定义原因'" label='原因：'>
          <el-input
            v-model.trim='remark'
            :placeholder="'请填写您' + cancelDialogTitle + '的原因（限20字内）'"
            maxlength='20'
            type='textarea'
          />
        </el-form-item>
      </el-form>
      <span slot='footer' class='dialog-footer'>
        <el-button @click=";(cancelDialogVisible = false), (cancelReason = '')"
        >取 消</el-button
        >
        <el-button type='primary' @click='confirmCancel'>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator'
import HeadLable from '@/components/HeadLable/index.vue'
import InputAutoComplete from '@/components/InputAutoComplete/index.vue'
import TabChange from './tabChange.vue'
import Empty from '@/components/Empty/index.vue'
import {
  getOrderDetailPage,
  queryOrderDetailById,
  completeOrder,
  deliveryOrder,
  orderCancel,
  orderReject,
  orderAccept,
  getOrderListBy
} from '@/api/order'

@Component({
  components: {
    HeadLable,
    InputAutoComplete,
    TabChange,
    Empty
  }
})
export default class extends Vue {
  private defaultActivity: any = 0
  private orderStatics = {}
  private row = {}
  private isAutoNext = true
  private isTableOperateBtn = true
  private currentPageIndex = 0 //记录查看详情数据的index
  private orderId = '' //订单号
  private input = '' //搜索条件的订单号
  private phone = '' //搜索条件的手机号
  private valueTime = []
  private dialogVisible = false //详情弹窗
  private cancelDialogVisible = false //取消，拒单弹窗
  private cancelDialogTitle = '' //取消，拒绝弹窗标题
  private cancelReason = ''
  private remark = '' //自定义原因
  private counts: number = 0
  private page: number = 1
  private pageSize: number = 10
  private tableData = []
  private diaForm = []
  private isSearch: boolean = false
  private orderStatus = 0 //列表字段展示所需订单状态,用于分页请求数据
  private dialogOrderStatus = 0 //弹窗所需订单状态，用于详情展示字段
  private cancelOrderReasonList = [
    {
      value: 1,
      label: '订单量较多，暂时无法接单'
    },
    {
      value: 2,
      label: '菜品已销售完，暂时无法接单'
    },
    {
      value: 3,
      label: '餐厅已打烊，暂时无法接单'
    },
    {
      value: 0,
      label: '自定义原因'
    }
  ]

  private cancelrReasonList = [
    {
      value: 1,
      label: '订单量较多，暂时无法接单'
    },
    {
      value: 2,
      label: '菜品已销售完，暂时无法接单'
    },
    {
      value: 3,
      label: '骑手不足无法配送'
    },
    {
      value: 4,
      label: '客户电话取消'
    },
    {
      value: 0,
      label: '自定义原因'
    }
  ]
  private orderList = [
    {
      label: '全部订单',
      value: 0
    },
    {
      label: '待付款',
      value: 1
    },
    {
      label: '待接单',
      value: 2
    },
    {
      label: '待派送',
      value: 3
    },
    {
      label: '派送中',
      value: 4
    },
    {
      label: '已完成',
      value: 5
    },
    {
      label: '已取消',
      value: 6
    }
  ]

  created() {
    this.init(Number(this.$route.query.status) || 0)
  }

  mounted() {
    //如果有值说明是消息通知点击进来的
    if (
      this.$route.query.orderId &&
      this.$route.query.orderId !== 'undefined'
    ) {
      this.goDetail(this.$route.query.orderId, 2)
    }
    if (this.$route.query.status) {
      this.defaultActivity = this.$route.query.status
    }
    // console.log(this.$route.query, 'this.$route')
  }

  initFun(orderStatus) {
    this.page = 1
    this.init(orderStatus)
  }

  change(activeIndex) {
    if (activeIndex === this.orderStatus) return
    this.init(activeIndex)
    this.input = ''
    this.phone = ''
    this.valueTime = []
    this.dialogOrderStatus = 0
    this.$router.push('/order')
    console.log(activeIndex, '接收到了子组件的index')
  }

  //获取待处理，待派送，派送中数量
  getOrderListBy3Status() {
    getOrderListBy({})
      .then((res) => {
        if (res.data.code === 1) {
          this.orderStatics = res.data.data
        } else {
          this.$message.error(res.data.msg)
        }
      })
      .catch((err) => {
        this.$message.error('请求出错了：' + err.message)
      })
  }

  init(activeIndex: number = 0, isSearch?) {
    this.isSearch = isSearch
    const params = {
      page: this.page,
      pageSize: this.pageSize,
      number: this.input || undefined,
      phone: this.phone || undefined,
      beginTime:
        this.valueTime && this.valueTime.length > 0
          ? this.valueTime[0]
          : undefined,
      endTime:
        this.valueTime && this.valueTime.length > 0
          ? this.valueTime[1]
          : undefined,
      status: activeIndex || undefined
    }
    getOrderDetailPage({ ...params })
      .then((res) => {
        if (res.data.code === 1) {
          this.tableData = res.data.data.records
          this.orderStatus = activeIndex
          this.counts = Number(res.data.data.total)
          this.getOrderListBy3Status()
          if (
            this.dialogOrderStatus === 2 &&
            this.orderStatus === 2 &&
            this.isAutoNext &&
            !this.isTableOperateBtn &&
            res.data.data.records.length > 1
          ) {
            const row = res.data.data.records[0]
            this.goDetail(row.id, row.status, row)
          } else {
            return null
          }
        } else {
          this.$message.error(res.data.msg)
        }
      })
      .catch((err) => {
        this.$message.error('请求出错了：' + err.message)
      })
  }

  getOrderType(row: any) {
    if (row.status === 1) {
      return '待付款'
    } else if (row.status === 2) {
      return '待接单'
    } else if (row.status === 3) {
      return '待派送'
    } else if (row.status === 4) {
      return '派送中'
    } else if (row.status === 5) {
      return '已完成'
    } else if (row.status === 6) {
      return '已取消'
    } else {
      return '退款'
    }
  }

  // 查看详情
  async goDetail(id: any, status: number, row?: any) {
    // console.log(111, index, row)
    this.diaForm = []
    this.dialogVisible = true
    this.dialogOrderStatus = status
    this.orderId = id
    const { data } = await queryOrderDetailById({ orderId: id })
    this.diaForm = data.data
    this.row = row || { id: this.$route.query.orderId, status: status }
    if (this.$route.query.orderId) {
      this.$router.push('/order')
    }
  }

  //打开拒单弹窗
  orderReject(row: any) {
    this.cancelDialogVisible = true
    this.orderId = row.id
    this.dialogOrderStatus = row.status
    this.cancelDialogTitle = '拒绝'
    this.dialogVisible = false
    this.cancelReason = ''
  }

  //接单
  orderAccept(row: any) {
    this.orderId = row.id
    this.dialogOrderStatus = row.status
    orderAccept({ id: this.orderId })
      .then((res) => {
        if (res.data.code === 1) {
          this.$message.success('操作成功')
          this.orderId = ''
          // this.dialogOrderStatus = 0
          this.dialogVisible = false
          this.init(this.orderStatus)
        } else {
          this.$message.error(res.data.msg)
        }
      })
      .catch((err) => {
        this.$message.error('请求出错了：' + err.message)
      })
  }

  //打开取消订单弹窗
  cancelOrder(row: any) {
    this.cancelDialogVisible = true
    this.orderId = row.id
    this.dialogOrderStatus = row.status
    this.cancelDialogTitle = '取消'
    this.dialogVisible = false
    this.cancelReason = ''
  }

  //确认取消或拒绝订单并填写原因
  confirmCancel(type) {
    if (!this.cancelReason) {
      return this.$message.error(`请选择${this.cancelDialogTitle}原因`)
    } else if (this.cancelReason === '自定义原因' && !this.remark) {
      return this.$message.error(`请输入${this.cancelDialogTitle}原因`)
    }

    ;(this.cancelDialogTitle === '取消' ? orderCancel : orderReject)({
      id: this.orderId,
      // eslint-disable-next-line standard/computed-property-even-spacing
      [this.cancelDialogTitle === '取消' ? 'cancelReason' : 'rejectionReason']:
        this.cancelReason === '自定义原因' ? this.remark : this.cancelReason
    })
      .then((res) => {
        if (res.data.code === 1) {
          this.$message.success('操作成功')
          this.cancelDialogVisible = false
          this.orderId = ''
          // this.dialogOrderStatus = 0
          this.init(this.orderStatus)
        } else {
          this.$message.error(res.data.msg)
        }
      })
      .catch((err) => {
        this.$message.error('请求出错了：' + err.message)
      })
  }

  // 派送，完成
  cancelOrDeliveryOrComplete(status: number, id: string) {
    const params = {
        status,
        id
      }
    ;(status === 3 ? deliveryOrder : completeOrder)(params)
      .then((res) => {
        if (res.data.code === 1) {
          this.$message.success('操作成功')
          this.orderId = ''
          // this.dialogOrderStatus = 0
          this.dialogVisible = false
          this.init(this.orderStatus)
        } else {
          this.$message.error(res.data.msg)
        }
      })
      .catch((err) => {
        this.$message.error('请求出错了：' + err.message)
      })
  }

  handleClose() {
    this.dialogVisible = false
  }

  private handleSizeChange(val: any) {
    this.pageSize = val
    this.init(this.orderStatus)
  }

  private handleCurrentChange(val: any) {
    this.page = val
    this.init(this.orderStatus)
  }
}
</script>

<style lang='scss' scoped>
.dashboard {
  &-container {
    margin: 30px;
    // height: 100%;
    min-height: 700px;

    .container {
      background: #fff;
      position: relative;
      z-index: 1;
      padding: 30px 28px;
      border-radius: 4px;
      // min-height: 650px;
      height: calc(100% - 55px);

      .tableBar {
        // display: flex;
        margin-bottom: 20px;
        justify-content: space-between;

        .tableLab {
          span {
            cursor: pointer;
            display: inline-block;
            font-size: 14px;
            padding: 0 20px;
            color: $gray-2;
            border-right: solid 1px $gray-4;
          }
        }
      }

      .tableBox {
        width: 100%;
        border: 1px solid $gray-5;
        border-bottom: 0;
      }

      .pageList {
        text-align: center;
        margin-top: 30px;
      }

      //查询黑色按钮样式
      .normal-btn {
        background: #333333;
        color: white;
        margin-left: 20px;
      }
    }

    .hContainer {
      height: auto !important;
    }
  }
}

.search-btn {
  margin-left: 20px;
}

.info-box {
  margin: -15px -44px 20px;

  p {
    display: flex;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    text-align: left;
    margin-bottom: 14px;

    &:last-child {
      margin-bottom: 0;
    }

    label {
      width: 100px;
      display: inline-block;
      color: #666;
    }

    .des {
      flex: 1;
      color: #333333;
    }
  }
}

.order-top {
  // height: 80px;
  border-bottom: 1px solid #e7e6e6;
  padding-bottom: 26px;
  padding-left: 22px;
  padding-right: 22px;
  // margin: 0 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .order-status {
    width: 57.25px;
    height: 27px;
    background: #333333;
    border-radius: 13.5px;
    color: white;
    margin-left: 19px;
    text-align: center;
    line-height: 27px;
  }

  .status3 {
    background: #f56c6c;
  }

  p {
    color: #333;

    label {
      color: #666;
    }
  }

  .order-num {
    font-size: 16px;
    color: #2a2929;
    font-weight: bold;
    display: inline-block;
  }
}

.order-middle {
  .user-info {
    min-height: 140px;
    background: #fbfbfa;
    margin-top: 23px;

    padding: 20px 43px;
    color: #333;

    .user-info-box {
      min-height: 55px;
      display: flex;
      flex-wrap: wrap;

      .user-name {
        flex: 67%;
      }

      .user-phone {
        flex: 33%;
      }

      .user-getTime {
        margin-top: 14px;
        flex: 80%;

        label {
          margin-right: 3px;
        }
      }

      label {
        margin-right: 17px;
        color: #666;
      }

      .user-address {
        margin-top: 14px;
        flex: 80%;

        label {
          margin-right: 30px;
        }
      }
    }

    .user-remark {
      min-height: 43px;
      line-height: 43px;
      background: #fffbf0;
      border: 1px solid #fbe396;
      border-radius: 4px;
      margin-top: 10px;
      padding: 6px;
      display: flex;
      align-items: center;

      div {
        display: inline-block;
        min-width: 53px;
        height: 32px;
        background: #fbe396;
        border-radius: 4px;
        text-align: center;
        line-height: 32px;
        color: #333;
        margin-right: 30px;
        // padding: 12px 6px;
      }

      span {
        color: #f2a402;
        line-height: 1.15;
      }
    }

    .orderCancel {
      background: #ffffff;
      border: 1px solid #b6b6b6;

      div {
        padding: 0 10px;
        background-color: #e5e4e4;
      }

      span {
        color: #f56c6c;
      }
    }
  }

  .dish-info {
    // min-height: 180px;
    display: flex;
    flex-wrap: wrap;
    padding: 20px 40px;
    border-bottom: 1px solid #e7e6e6;

    .dish-label {
      color: #666;
    }

    .dish-list {
      flex: 80%;
      display: flex;
      flex-wrap: wrap;

      .dish-item {
        flex: 50%;
        margin-bottom: 14px;
        color: #333;

        .dish-num {
        }

        .dish-item-box {
          display: inline-block;
          width: 120px;
        }
      }
    }

    .dish-label {
      margin-right: 65px;
    }

    .dish-all-amount {
      flex: 1;
      padding-left: 92px;
      margin-top: 10px;

      label {
        color: #333333;
        font-weight: bold;
        margin-right: 5px;
      }

      span {
        color: #f56c6c;
      }
    }
  }
}

.order-bottom {
  .amount-info {
    // min-height: 180px;
    display: flex;
    flex-wrap: wrap;
    padding: 20px 40px;
    padding-bottom: 0px;

    .amount-label {
      color: #666;
      margin-right: 65px;
    }

    .amount-list {
      flex: 80%;
      display: flex;
      flex-wrap: wrap;
      color: #333;
      // height: 65px;
      .dish-amount,
      .package-amount,
      .pay-type {
        display: inline-block;
        width: 300px;
        margin-bottom: 14px;
        flex: 50%;
      }

      .send-amount,
      .all-amount,
      .pay-time {
        display: inline-block;
        flex: 50%;
        padding-left: 10%;
      }

      .package-amount {
        .amount-name {
          margin-right: 14px;
        }
      }

      .all-amount {
        .amount-name {
          margin-right: 24px;
        }

        .amount-price {
          color: #f56c6c;
        }
      }

      .send-amount {
        .amount-name {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>

<style lang='scss'>
.dashboard-container {
  .cancelReason {
    padding-left: 40px;
  }

  .cancelTime {
    padding-left: 50px;
  }

  .orderTime {
    padding-left: 50px;
  }

  td.operate .cell {
    .before,
    .middle,
    .after {
      height: 39px;
      width: 48px;
    }
  }

  td.operate .cell,
  td.otherOperate .cell {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
  }

  .order-dialog {
    .el-dialog {
      max-height: 764px !important;
      display: flex;
      flex-direction: column;
      margin: 0 !important;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-height: calc(100% - 30px);
      max-width: calc(100% - 30px);
    }

    .el-dialog__body {
      height: 520px !important;
    }
  }
}

.el-dialog__body {
  padding-top: 34px;
  padding-left: 30px;
  padding-right: 30px;
}

.cancelDialog {
  .el-dialog__body {
    padding-left: 64px;
  }

  .el-select,
  .el-textarea {
    width: 293px;
  }

  .el-textarea textarea {
    height: 114px;
  }
}

.el-dialog__footer {
  .el-checkbox {
    float: left;
    margin-left: 40px;
  }

  .el-checkbox__label {
    color: #333333 !important;
  }
}

.empty-box {
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    margin-top: 0 !important;
  }
}
</style>
